<script setup lang="ts">
// 这是一个使用TypeScript的Vue3组件脚本部分
// <script setup lang="ts"> 表示启用TypeScript支持并使用setup语法糖
// 该组件主要提供文章布局的插槽结构，无需额外的逻辑代码，因此脚本部分为空
</script>

<template>
    <!-- 文章容器：包裹整个文章的布局结构 -->
    <div class="article-container">
        <!-- 头部区域容器：用于展示文章标题等头部内容 -->
        <div class="header-box">
            <!--
                具名插槽header：
                - 父组件可通过<template #header>填充头部内容
                - 如文章标题、作者信息、发布时间等
            -->
            <slot name="header"></slot>
        </div>

        <!-- 内容区域容器：用于展示文章主体内容 -->
        <div class="content-box">
            <!--
                具名插槽content：
                - 父组件可通过<template #content>填充主体内容
                - 如文章段落、图片、列表等核心内容
            -->
            <slot name="content"></slot>
        </div>

        <!-- 底部区域容器：用于展示文章结尾内容 -->
        <div class="footer-box">
            <!--
                具名插槽footer：
                - 父组件可通过<template #footer>填充底部内容
                - 如版权信息、相关推荐、评论区入口等
            -->
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<style scoped>
/* 组件的局部样式，scoped确保样式仅作用于当前组件 */

/* 文章容器的直接子元素（三个区域容器）共用的样式 */
.article-container > div {
    border: 1px solid black; /* 为每个区域添加黑色边框，清晰区分布局 */
    padding: 15px; /* 内边距，让内容不紧贴边框 */
    margin: 10px 0; /* 上下外边距，分隔三个区域 */
}

/* 可根据需要添加各区域的单独样式 */
/*
.header-box {
    background-color: #f5f5f5;
}

.content-box {
    min-height: 300px;
}

.footer-box {
    text-align: center;
}
*/
</style>